<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app"></div>
<script src="../packages/runtime-dom/dist/runtime-dom.global.js"></script>
<script type="module">

    let {createApp, h, reactive} = VueRuntimeDom

    let app = {
        setup(props, context) {
            let state = reactive({name: "张三1", isFlag: false})
            const fn = () => {
                state.name = "李四"
            }

            setTimeout(() => {
                state.isFlag = true
            }, 1000)

            return {
                state,
                fn
            }
        },
        render(proxy) {
            if (proxy.state.isFlag) {
                return h("div", {style: {color: "red"}, feng: "dd", onClick: proxy.fn}, [
                    h("span", {style: {color: "red"}, key: "A"}, "A"),
                    h("span", {style: {color: "red"}, key: "B"}, "B"),
                    h("span", {style: {color: "red"}, key: "C"}, "C"),
                    h("span", {style: {color: "red"}, key: "D"}, "D")
                ])
            } else {
                return h("div", {style: {color: "blue"}, onClick: proxy.fn}, [
                    h("span", {style: {color: "red"}, key: "A"}, "A"),
                    h("span", {style: {color: "red"}, key: "B"}, "B"),
                    h("span", {style: {color: "red"}, key: "C"}, "C"),
                ])
            }

        }
    }
    createApp(app, {name: "张三", age: 10}).mount("#app")


</script>
</body>
</html>